<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <el-row>
        <el-col :span="12" style="display:flex;align-items:center;">
          <img src="../assets/logoNav-old.png" />
          <span style="margin-left:20px;font-size:24px;">北城集团数字工地管理平台</span>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-button type="text" style="color:#fff;" v-show="flag" @click="go">可视化大屏</el-button>
            <el-button type="text" @click="logout" style="color:#fff;">退出登录</el-button>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <!-- 主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="IsCollapse ? '64px' : '200px'">
        <!-- <div class="toggbut" @click="foldmenu">|||</div> -->
        <!-- 侧边栏菜单区 -->
        <el-menu
          background-color="#fff"
          text-color="#000"
          active-text-color="#6179d7"
          :default-active="index"
          router
          @select="handleSelect"
          class="el-menu-vertical-demo"
          :collapse="IsCollapse"
        >
        <div v-for="(item, index) in menuList" :key="index">
            <el-menu-item :index="item.menuPath" >
            <template slot="title">
              <!-- <i class="el-icon-location"></i> -->
              <i v-if="item.menuPath == '/videoManagement'|| item.menuPath == '/videoList'" class="iconfont icon-jiankong1"></i>
              <i v-if="item.menuPath == '/mainhome'" class="iconfont icon-xiangmu"></i>
              <i v-if="item.menuPath == '/photoList'" class="iconfont icon-shipin"></i>
              <i v-if="item.menuPath == '/aerialManagement'" class="iconfont icon-hangpai fly"></i>
              <i v-if="item.menuPath == '/personManagement'" class="iconfont icon-renyuan"></i>
              <i v-if="item.menuPath == '/setPoint'" class="iconfont icon-jiankongguanli--"></i>
              <i v-if="item.menuPath == '/accessStatistics'" class="iconfont icon-tongji1"></i>
              <i v-if="item.menuPath == null " class="iconfont icon-wangluojiankongguanli"></i>
              <span>{{item.menuName}}</span>
            </template>
          </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <!-- 右侧主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import base from "../api/base"
export default {
  data() {
    return {
      menuList: [
        // {
        //   path: '/page',
        //   name: '可视化配置'
        // }
      ], //左侧菜单数据
      // 控制菜单折叠
      IsCollapse: false,
      index: '/videoManagement',
      flag: false
    };
  },
  created() {
    this.menu()
    // console.log(window.location.search)
    if(window.localStorage.getItem("flag") || window.location.search) {
      this.flag = true
    }
    // 获取当前路由

    this.index = this.$route.path;
  },
  mounted(){
    console.log(window.location.search)
  },
  methods: {
    //获取菜单
    menu() {
      this.$api.loginhome.menu().then(res => {
        if(res.success) {
          this.menuList = res.data
          console.log(this.menuList)
        }
      })
    },
    go() {
      let token  = window.localStorage.getItem("token")
      window.location.href = `${base.spurl}/lv/index.html?fid=1015913377235822436&token=${token}&path=mainhome`
    },
    logout() {
      // 清空token
      window.localStorage.clear()
      this.$router.push("/login");
    },
    // 折叠菜单栏函数
    foldmenu() {
      this.IsCollapse = !this.IsCollapse;
    },
    handleSelect(key, keyPath) {
        this.index = key
        if(key == null){
          let token  = window.localStorage.getItem("token")
          window.location.href = `${base.spurl}/ncpr-lv/monitor?token=${token}&path=mainhome`
        }
    }
  }
};
</script>

<style scoped>
 /deep/.el-menu-item:hover {
     background-color: #6179d7;
 }
.home-container {
  height: 100%;
}
.el-header {
  background: linear-gradient(to right,#2240c8,#6547b2);
  padding: 10px 20px;
}
.el-menu {
  border: none;
}
.el-row :last-of-type {
  text-align: right;
}
.el-col img {
  width: 40px;
  height: 40px;
  /* border-radius: 50%; */
  background: white;
  vertical-align: middle;
}
.el-col span {
  font-weight: bold;
  color: white;
  padding-left: 5px;
  line-height: 40px;
  height: 40px;
}
.el-aside {
  background: #fff;
}
.el-main {
  background: #eaedf1;
}
.iconfont {
  padding-right: 10px;
}
.toggbut {
  background: #3f68a7;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.fly{
  font-size: 20px;
}

</style>
